<template>
    <div>

      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;"  row-key="id"  border  default-expand-all
                :tree-props="{children: 'menuList'}"  @cell-dblclick="rightMenu">
        <el-table-column  prop="id" label="ID"  width="250"></el-table-column>
        <el-table-column  prop="menuName"  label="菜单名称" ></el-table-column>
        <el-table-column  prop="code"  label="菜单编码"></el-table-column>
        <el-table-column  prop="parentCode"  label="父级编码"></el-table-column>
        <el-table-column  prop="leval"  label="等级"></el-table-column>
        <el-table-column  prop="url"  label="路由和权限符"></el-table-column>
        <el-table-column  label="操作">
           <template solt-scope="scope">
               <el-button type="primary" v-quanxian="yyy" icon="el-icon-edit-outline" size="medium" @click="updateMenu">修改</el-button>
           </template>
        </el-table-column>

      </el-table>


      <el-dialog title="添加菜单" :visible.sync="isShowWindow"  width="30%">

        <el-form ref="form" :model="formData" label-width="80px">

          <span v-show="xianshi">父级菜单：{{this.formData.parentMenuName}}- 父级编码:{{this.formData.parentCode}}-父级等级：{{this.formData.parentLeval}} </span>

          <el-form-item label="菜单名称">
            <el-input v-model="formData.menuName" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="菜单等级" label-width="80px" >
            <el-select v-model="formData.leval" placeholder="请选择活动区域" @change="levalChange" style="width: 200px">
              <el-option label="一级" value="1"></el-option>
              <el-option label="二级" value="2"></el-option>
              <el-option label="三级" value="3"></el-option>
              <el-option label="四级" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路由路径" v-show="xinashirouter">
            <el-input v-model="formData.url" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" v-show="showornot">
            <el-input v-model="formData.url" style="width: 200px"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowWindow = false">取 消</el-button>
          <el-button type="primary" @click="saveMenu">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "menuList",
        data(){
          return{
            yyy:"menu:list:upddate",
            showornot:false,
            xinashirouter:false,
            xianshi:true,
            isShowWindow:false,
            tableData:[],
            formData:{
              menuName:undefined,
              leval:undefined,
              parentLeval:undefined,
              parentMenuName:"",
              parentCode:"",
              url:""
            }
          }
        },
        methods:{
          updateMenu(){
            this.$axios.post(this.$myInfo.loginPath+"menu/toUpdateMenu",{}).then((response)=>{
              if(response.data.code==200){
                //刷新列表
                this.getMenuTree();
              }
            })
          },
          saveMenu(){
              this.$axios.post(this.$myInfo.loginPath+"menu/addMenu",this.formData).then((response)=>{
                  if(response.data.code==200){
                    //刷新列表
                    this.getMenuTree();
                  }else{
                    this.$message({type:"error",message:"重复添加"});
                    this.isShowWindow=false;
                    //清空
                    this.formData={};
                  }
              })
          },
          levalChange(){
               this.showornot=false;
              if(this.formData.parentLeval=="1"){
                if(this.formData.leval=="2"){
                   this.xianshi=true;
                }
                if(this.formData.leval=="1"){
                   this.xianshi=false;
                }
                if(this.formData.leval=="3"){
                  this.$message({type:"warning",message:"当前等级是1级，只可以添加1级和2级",duration:1000})
                  this.formData.leval="2";
                  this.xianshi=true;
                }
                if(this.formData.leval=="4"){
                  this.$message({type:"warning",message:"当前等级是1级，只可以添加1级和2级",duration:1000})
                  this.formData.leval="2";
                  this.xianshi=true;
                }
              }

              if(this.formData.parentLeval=="2"){
                if(this.formData.leval=="3"){
                  this.xinashirouter=true;
                  this.xianshi=true;
                }
                if(this.formData.leval=="1"){
                  this.xinashirouter=false;
                  this.xianshi=false;
                }
                if(this.formData.leval=="2"){
                  this.$message({type:"warning",message:"当前等级是2级，只可以添加1级和3级",duration:1000})
                  this.xianshi=true;
                  this.xinashirouter=true;
                  this.formData.leval="3";
                }
                if(this.formData.leval=="4"){
                  this.xinashirouter=true;
                  this.$message({type:"warning",message:"当前等级是2级，只可以添加1级和3级",duration:1000})
                  this.xianshi=true;
                  this.formData.leval="3";
                }
              }


            if(this.formData.parentLeval=="3"){
              if(this.formData.leval=="1"){
                this.xinashirouter=false;
                this.xianshi=false;
              }
              if(this.formData.leval=="4"){
                this.xinashirouter=false;
                this.xianshi=true;
                this.showornot=true;
              }
              if(this.formData.leval=="2"){
                this.$message({type:"warning",message:"当前等级是3级，只可以添加1级和4级",duration:1000})
                this.xianshi=true;
                this.formData.leval="4";
                this.showornot=true;
              }
              if(this.formData.leval=="3"){
                this.$message({type:"warning",message:"当前等级是3级，只可以添加1级和4级",duration:1000})
                this.xianshi=true;
                this.formData.leval="4";
                this.showornot=true;
              }
            }




          },
          rightMenu(row,column,cell,event){
              this.showornot=false;
              this.formData.parentLeval=row.leval;
              this.formData.parentMenuName=row.menuName;
              this.formData.parentCode=row.code;
              if(row.leval=="4"){
                  this.$message({type:"warning",message:"请双击对应的3级数据来添加4级数据",duration:1000})
                  return;
              }
             this.formData.leval=""+(row.leval+1);
              if(this.formData.leval=="4"){
                this.showornot=true;
              }
              if(this.formData.leval=="3"){
                 this.xinashirouter=true;
              }else{
                this.xinashirouter=false;
              }
              //打开弹窗
             this.isShowWindow=true;
          },
          getMenuTree(){
            this.$axios.post(this.$myInfo.loginPath+"menu/getAllMenuList").then((response)=>{
              this.tableData=response.data.result
            })
          }
        },
        mounted(){
           this.getMenuTree();

        }
    }
</script>

<style>

</style>
